import type { FC } from 'react';
import { View } from 'react-native';
import * as NavigationBar from 'expo-navigation-bar';
import styles from './styles';

type IndicatorProps = {
  total: number;
  index: number;
}

const Indicator: FC<IndicatorProps> = (porps) => {
  const { total, index } = porps;
  const items = Array.from({ length: total });

  return (
    <View style={styles.indicators}>
      {items.map((_, i) => {
        const last = i === total - 1;
        const isActive = i === index;
        return (
          <View
            key={`indicator_${i}`}
            style={[
              styles.indicator,
              last && styles.indicatorLast,
              isActive && styles.indicatorActive
            ]}
          />
        );
      })}
    </View>
  );
}

export default Indicator;